<template>
  <div>
    <h1>分类列表</h1>
    <el-table :data="items" border>
      <el-table-column prop="id" label="ID" width="220"></el-table-column>
      <el-table-column prop="name" label="分类名称"></el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="250">
        <template slot-scope="scope">
          <el-button @click="$router.push({path: '/categories/edit',query: {id : scope.row.id}})" type="primary" size="small">编辑</el-button>
          <el-button @click="handleClick(scope.row.id)" type="primary" size="small">查看</el-button>
          <el-button @click="deteleCategory(scope.row.id)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next, sizes, total, jumper"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pagesize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    >

    </el-pagination>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        items:[],
        condtion:{
          "page" : 1,
          "limit": 10
        },
        pagesize: 10,
        total: 0
      }
    },
    //初始化默认化获取数据
    created(){
      this.fetch()

    },
    methods: {
      async fetch() {
        const res = await this.$http.post("/cms/category/list.json" ,this.condtion)
        this.items = res.data.data
        this.total = res.data.count
      },

      handleCurrentChange(cpage) {
        this.condtion.page = cpage
        this.fetch()
      }
      ,
      handleSizeChange(cpage) {
        this.condtion.limit= cpage
      },
      handleClick(row){
        console.log(row)
      },

      async  deteleCategory(row){
        const  res = await this.$http.get("/cms/category/delete.json/"+row)
        this.fetch();
        this.$message("删除成功！")
      }
    }
  }

</script>

<style scoped>

</style>
